<template>
  <div class="chart-box">
    <chart-topic class="chart-head" header="全县产品种类"></chart-topic>
    <div class="chart-item">
      <div class="chart-tools">
        <div class="chart-tools-title">全县</div>
        <div>
          <el-date-picker
            align="right"
            :append-to-body="false"
            size="mini"
            value-format="yyyy"
            @change="changeYear"
            v-model="value"
            type="year"
            placeholder="2022">
          </el-date-picker>
        </div>
      </div>
      <div>

      </div>

      <div class="product-charts" id="ProductTypeChart">
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts'
import ChartTopic from '@/components/ChartTopic'

export default {
  name: 'ProductType',
  components: {
    ChartTopic
  },
  props: {
    productType: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      typeList: [],
      value:'',
      chart: null

    }
  },
  watch: {
    productType: {
      handler(newVal) {
        this.typeList = newVal.map(item => {
          return item.totalYear
        })
        this.setOptions()
      },
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.chart.resize()
    })
    this.initChart()
  },
  methods: {
    changeYear(){
      this.$emit('changeYear',this.value)
    },
    initChart(){
      let chartDom = document.getElementById('ProductTypeChart')
      this.chart = echarts.init(chartDom)
      this.setOptions()
    },

    setOptions(){
      const chartOptions = {
        grid: {
          left: '1%',
          right: '1%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          transitionDuration: 0,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['羊肉', '猪肉', '牛奶', '雪糕', '奶酪','羊奶','鸡蛋'],
          axisLabel: {
            show: true,
            axisTick: {
              alignWithLabel: true
            },
            textStyle: {
              interval: 0,
              color: '#ffffff',
              fontSize: 10 //这⾥⽤参数代替了
            }
          }
        },
        yAxis: {
          name: '产量(吨)',
          nameGap: 7,
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 9
          },
          splitLine: {
            show: false
          },
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
              fontSize: 10      //这⾥⽤参数代替了
            }
          }
        },
        series: [
          {
            name: '吨',
            barWidth: 15,
            data: this.typeList,
            type: 'bar',
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [
                    ['#E7C717', 'transparent'],
                    ['#7562E6', 'transparent'],
                    ['#62E6B0', 'transparent'],
                    ['#62B3E6', 'transparent'],
                    ['#F4745B', 'transparent'],
                    ['#EFF45B', 'transparent'],
                    ['#B362E6', 'transparent']
                  ]
                  let colorItem = colorList[params.dataIndex]
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorItem[0]
                    },
                    {
                      offset: 1,
                      color: colorItem[1]
                    }
                  ], false)

                }
              }
            }
          }
        ]
      }

      this.chart.setOption(chartOptions,true)
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-box{
  ::v-deep .el-input__inner{
    width: 1.28rem;
    height: 0.3rem;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color:#bfc3cb;
  }
}
::v-deep.el-date-editor{
  width: 100px;
}
</style>
<style scoped lang="scss">
.chart-tools-title {
  position: relative;
  padding-left: 0.15rem;

  &:before {
    content: '';
    background: #45FFB7;
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: calc(50% - 0.04rem);
  }
}

.chart-box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .chart-head {

  }

  .chart-item {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;

    .chart-tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.15rem;
      height: 0.42rem;

      .chart-tools-title {
        font-size: 0.02rem;
      }
    }

    #ProductTypeChart {
      flex: 1;
    }
  }
}

.product-charts {
  height: 6rem;
}

</style>
